<template>
	<view sc-list-context>
		<view class="zjc-rb">
			<uni-swiper-dot :info="info" :current="current" field="content" mode="default">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<image style="width: 750rpx; height: 500rpx;" :src="item.url" alt="" mode="aspectFill">
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="sc-main-content">
			<view class="sc-list-header">
				<view class="sc-title" style="margin-top: 0rpx; margin-left: 30rpx;" >
					<view style="font-size: 40rpx;">活动列表</view>
					<view style="font-size: 17rpx;">List of Events</view>
				</view>
				
				<view class="sc-header-image">
					<image src="../../static/icon/sc-list-icon.png" mode="" style="width: 300rpx; height: 200rpx;"></image>
				</view>
			</view>
			<scroll-view scroll-with-animation=true refresher-enabled=true show-scrollbar=true  @scrolltolower="lowerBottom" @refresherrefresh="getFresh" scroll-y="true" class="scrollHeight">
			<view class="sc-main-item" v-for="item in act_lists" :key="item.actId" @click="toActdetail(item.actId)">
				<view class="sc-main-item-image">
					<image :src="item.actImage" mode="" style="width: 300rpx; height: 200rpx;"></image>
				</view>
				<view class="sc-main-item-desc">
					<view class="title" style="font-size: 35rpx; color: black;">
						{{item.actName}}
					</view>
					<view class="desc" style="color: #f88a3f;">
						活动
					</view>
					<view class="pri">
						<text>日期:<text style="font-size: 24rpx;">{{item.actDatetime}}</text></text>
					</view>
					<view class="sc-time">
						<text>{{item.actTime}}</text>
					</view>
				</view>
			</view>
			</scroll-view>
			<view  style="width: 100%; height: 100rpx; max-width: 100%;">
				<view style=" margin-top: 140rpx; margin-left: 250rpx; position: absolute; bottom:30rpx;">
					<text v-show="endPage" style="font-size: 26rpx;">我也是有底线的</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				endPage:false,
				currentPage: 0,// 当前分页起点
								pageSize: 2,
								curPage:0,
								totNum:0,
				act_lists:[
					
					
				],
				info: [{
						url:"../../static/rb1.jpg"
					}, 
					{
						url:'../../static/rb2.jpg'
					}, 
					{
						url:'../../static/rb3.jpg'
					}],
				
				current:1,
				
			}
		},
		onLoad()
		{
			this.init(0)
		},
		methods: {
			init(p){
				this.request({
					url:"/activity/list",
					method:'GET',
					data:{
						curPage:p,
						pageSize:this.pageSize,
						
					}
				}).then(res=>{
					if(res.code==='1'){
						this.act_lists = this.act_lists.concat(res.data)
						this.totNum=res.data.totNum
						this.curPage = p+1
						
					}
					else{
						console.log("失败")
					}
				}).catch(()=>{
					console.log("系统错误")
				})
				this.triggered = false
			},
			
			change(e){
				this.current = e.detail.current
			},
			toActdetail(Id){
				uni.navigateTo({
					url:"/pages/detailofactivity/detailofactivity?actId="+Id
				})
			},
			lowerBottom()
			{
				if(this.curPage*this.pageSize<this.totlNum)
				{
					this.init(this.curPage)
				}else
				{
					this.end=true
				}
				
				
			},
			getFresh()
			{
				
				this.act_lists=[]
				this.init(0)
				this.end = false
			}
			
			
		},
		
		
	}
</script>

<style scoped>
	
	.scrollHeight{
		height: calc(100vh - 490rpx);
}
.title{
		  width: 350rpx;
		  white-space: nowrap; /* 防止换行 */
		  overflow: hidden; /* 隐藏溢出内容 */
		  text-overflow: ellipsis; /* 在溢出时显示省略号 */
	}
.sc-main-content {
	background-color: #ffffff;
	position: absolute;
	top:450rpx;
	width: 100%;
	border-radius:20rpx;
	z-index: 2;
}
.zjc-rb {
		width: 100%;
		height: 500rpx;
		margin: 0 0;
}
.swiper-box{
		width: 100%;
		height: 500rpx;
}
.sc-list-header{
	margin-left: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sc-main-item{
	display: flex;
	width: 90%;
	height: 220rpx;
	border-radius: 20rpx;
	background-color: #fafafa;
	margin: 0 auto;
	margin-top: 20rpx;
}
.sc-main-item-image{

	margin-left: 10rpx;
	border-radius: 20rpx;
}
.sc-main-item-image image{
	border-radius: 20rpx;
}
.sc-main-item-desc {
	margin-left: 24rpx;
}
.sc-main-item-desc view {
	font-size: 25rpx;
	margin-top: 10rpx;
	color: gray;
}
.desc {
	background-color: #ffedcd;
	border-radius: 10rpx;
	text-align: center;
	width: 100rpx;
}

</style>
